<template>
    <h-section>
        <template #title>
            <flexbox>
                <my-icon type="iconjingyi" style="font-size: 24px; color: #147fe7" />
                <span class="margin-l-8">精益画布</span>
            </flexbox>
        </template>
        <template #titleExtra>
            <flexbox justify="flex-end" align="center" style="width: 100%">
                <div>
                    <div class="title-icon" @click="handleSave" v-if="!disabled">
                        <FileTextOutlined />
                        <span class="margin-l-8">保存</span>
                    </div>
                </div>
            </flexbox>
        </template>
        <pro-grid ref="proGridRef" :disabled="disabled" :list="list" />
    </h-section>
</template>

<script lang="ts">
import ProGrid from '@/views/productAnalysis/components/ProGrid.vue';
import { FileTextOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, unref } from 'vue';
export default defineComponent({
    components: {
        ProGrid,
        FileTextOutlined
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        disabled: { type: Boolean, default: false }
    },
    emits: ['save'],
    setup(props, { emit }) {
        const proGridRef = ref<any>();
        const list = ref<any[]>([
            { name: '问题', placeholder: '客户最需要解决的三个问题', value: '', type: 'text' },
            { name: '解决方案', placeholder: '产品最终要的三个功能', value: '', type: 'text' },
            { name: '独特卖点', placeholder: '产品最终要的三个功能用一句简明扼要但引人注目的话阐述为什么你的产品与众不同，值得购买', value: '', type: 'text' },
            { name: '竞争壁垒', placeholder: '无法被对手轻易复制或者买去的竞争优势', value: '', type: 'text' },
            { name: '用户细分', placeholder: '', value: '', type: 'text' },
            { name: '成本分析', placeholder: '获取客户所需的花费，销售花费，网站假设费用，人力资源费用等', value: '', type: 'text' },
            { name: '替代方案/竞品', placeholder: '', value: '', type: 'text' },
            { name: '关键指标', placeholder: '应该考核哪些东西', value: '', type: 'text' },
            { name: '一句话描述你的产品', placeholder: '值得购买', value: '', type: 'text' },
            { name: '渠道', placeholder: '如何找到客户，如何推广', value: '', type: 'text' },
            { name: '种子用户', placeholder: '列出可以作为种子用户的类型', value: '', type: 'text' },
            { name: '收入分析', placeholder: '盈利模式，收入，毛利', value: '', type: 'text' }
        ]);
        const handleSave = () => {
            list.value = unref(proGridRef).cardList;
            emit('save', unref(list));
        };
        const init = () => {
            if (props.detail.contendCanvas) {
                list.value = JSON.parse(props.detail.contendCanvas);
            }
        };
        init();
        return {
            proGridRef,
            list,
            handleSave
        };
    }
});
</script>
<style scoped lang="less">
.title-icon {
    cursor: pointer;
}
</style>